<template>
  <view class="custom-dropdown">
    <picker 
      mode="selector" 
      :range="options" 
      :value="selectedIndex"
      @change="handleChange"
      :disabled="disabled"
    >
      <view class="picker-value" :class="{ 'disabled': disabled }">
        {{ displayValue || placeholder }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  name: 'CustomDropdown',
  props: {
    // 选项数组
    options: {
      type: Array,
      default: () => []
    },
    // 当前选中的值
    value: {
      type: [String, Number],
      default: ''
    },
    // 占位符文本
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 选项的显示字段名（当options是对象数组时使用）
    labelKey: {
      type: String,
      default: 'text'
    },
    // 选项的值字段名（当options是对象数组时使用）
    valueKey: {
      type: String,
      default: 'value'
    }
  },
  computed: {
    // 处理选项数组，支持字符串数组和对象数组
    processedOptions() {
      if (!this.options || this.options.length === 0) {
        return []
      }
      
      // 如果是字符串数组，直接返回
      if (typeof this.options[0] === 'string') {
        return this.options
      }
      
      // 如果是对象数组，提取显示文本
      return this.options.map(item => item[this.labelKey] || item.text || item.label || item)
    },
    
    // 当前选中项的索引
    selectedIndex() {
      if (!this.value) return -1
      
      if (typeof this.options[0] === 'string') {
        return this.options.indexOf(this.value)
      }
      
      return this.options.findIndex(item => 
        (item[this.valueKey] || item.value) === this.value
      )
    },
    
    // 显示的值
    displayValue() {
      if (this.selectedIndex >= 0) {
        return this.processedOptions[this.selectedIndex]
      }
      return ''
    }
  },
  methods: {
    handleChange(e) {
      const index = e.detail.value
      if (index < 0 || index >= this.options.length) return
      
      let selectedValue
      if (typeof this.options[0] === 'string') {
        selectedValue = this.options[index]
      } else {
        selectedValue = this.options[index][this.valueKey] || this.options[index].value
      }
      
      // 触发change事件
      this.$emit('change', {
        value: selectedValue,
        index: index,
        item: this.options[index]
      })
      
      // 支持v-model
      this.$emit('input', selectedValue)
    }
  }
}
</script>

<style scoped>
.custom-dropdown {
  width: 100%;
}

/* 确保与现有样式完全一致 */
.picker-value {
  padding: 16rpx 40rpx 16rpx 24rpx;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 0;
  font-size: 28rpx;
  color: #1989fa;
  text-align: left;
  position: relative;
  height: 70rpx;
  line-height: 70rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 为下拉框添加箭头指示 */
.picker-value::after {
  content: "▼";
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20rpx;
  opacity: 0.7;
  color: #1989fa;
}

/* 禁用状态样式 */
.picker-value.disabled {
  background-color: #f5f7fa;
  color: #c0c4cc;
  cursor: not-allowed;
}

.picker-value.disabled::after {
  color: #c0c4cc;
}

/* 适配picker组件样式 */
picker {
  width: 100%;
  display: block;
}
</style>